
<template>
    <div style="background:#fff">
        <van-nav-bar
            title="我的学习"
            left-arrow
            @click-left="$router.go(-1)"
            @click-right="$router.push('/CalenDar')">
            <template #right>
                <van-icon name="calendar-o" style="font-size:.7rem" color="black"/>
            </template>
            </van-nav-bar>
            <van-tabs  v-model="active" v-for="(item,index) in info.typeNum" :key="index">
                <van-tab  :title="item.name">
                    <div class="div">
                        <div class="content" v-for="(child,index) in info.courseList" :key="index">
                            <p class="title">{{child.title}}</p>
                            <p class="time">{{new Date(child.start_play_date).toLocaleString()}}~{{new Date(child.end_play_date).toLocaleString()}}</p>
                            <van-progress :percentage="0" class="tiao"/>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
    </div>
</template>

<script>

import { mytsk } from "../Request/http.js";
    export default {
        data() {
            return {
                active:0,
                info:[]
            }
        },
        mounted(){
            mytsk().then(res=>{
                console.log(res);
                this.info=res
            })
        },
        methods:{
            
        }
    }
</script>

<style lang="scss" scoped>
.div{
    padding: .2rem;
}
.content{
width: 100%;
height: 3rem;
border: .01rem solid #ccc;
margin-top: .1rem;
box-sizing: border-box;
padding: .2rem;
border-radius: .3rem;
.title{
    width: 100%;
    font-size: .35rem;
}
.time{
    margin-top: .2rem;
}
.tiao{
    width: 4rem;
    margin-top: .2rem;
}

}
</style>